<template>
  <!-- 添加用户对话框 -->
  <el-dialog v-model="visible" title="添加工区" width="25%" @close="close" destroy-on-close>
    <el-form ref="userAddForm" :model="userAdd" :rules="rules" label-position="top">

      <el-form-item label="工区名：" prop="userCode">
        <el-input v-model="userAdd.regionName" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="所属部门:">
        <el-select v-model="userAdd.departmentId" placeholder="请选择部门"  style="width: 120px;" clearable>
          <el-option v-for="d in department" :label="d.departmentName" :value="d.id" :key="d.id"></el-option>
        </el-select>
        <!-- <el-input v-model="params.workRegionName" style="width: 120px;" clearable></el-input> -->
      </el-form-item>

      <!-- <el-form-item label="昵称：" prop="userName">
        <el-input v-model="userAdd.userName" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="真实姓名：" prop="realName">
        <el-input v-model="userAdd.realName" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="密码：" prop="userPwd">
        <el-input type="password" show-password v-model="userAdd.userPwd" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="确认密码：" prop="confirmPassword">
        <el-input type="password" show-password v-model="userAdd.confirmPassword" autocomplete="off"/>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="addUser">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, reactive} from 'vue'
import {post, tip, get} from "@/common";

const visible = ref(false); // 该页面的可见性
// 添加用户对象
const userAdd = reactive({
  departmentName: '',
  regionName: '',
  departmentId: '',
  // userName: '',
  // realName: '',
  // userPwd: '',
  // confirmPassword: ''
});

// 关闭
const close = () => {
  userAdd.departmentNme = '';
  userAdd.regionName= '';
  userAdd.departmentId= '';
  // userAdd.userName = '';
  // userAdd.realName = '';
  // userAdd.userPwd = '';
  // userAdd.confirmPassword = '';
  visible.value = false;
}

const rules = reactive({
  regionName: [
    {required: true, message: '请输入工区名', trigger: 'blur'}
  ],
  // realName: [
  //   {required: true, message: '请输入真实姓名', trigger: 'blur'}
  // ],
  // userPwd: [
  //   {required: true, message: '请输入密码', trigger: 'blur'},
  //   {min: 6, max: 20, message: '密码为6-20位', trigger: 'blur'}
  // ],
  // confirmPassword: [
  //   {required: true, message: '请再次输入密码', trigger: 'blur'},
  //   {min: 6, max: 20, message: '密码为6-20位', trigger: 'blur'}
  // ]
})

const department = ref({})
const getDepartment = () => {
  get("/Department/departmentId-all").then(result => {
    console.log(result)
    department.value = result.data;
  });
}
// 该对话框打开
const open = () => {
  getDepartment();
  visible.value = true;
};

const userAddForm = ref();
// 定义
const emit = defineEmits(["ok"]);
// 添加用户提交
const addUser = () => {
  // if (userAdd.userPwd != userAdd.confirmPassword) {
  //   tip.error("两次密码必须保持一致！");
  //   return;
  // }
  userAddForm.value.validate(valid => {
    if (valid) {
      post('/workregion/addWorkregion', userAdd).then(result => {
        emit('ok');
        tip.success(result.message);
        visible.value = false; // 关闭对话框
      });
    }
  });
}

defineExpose({open});

// 获取部门
// const department = ref({})
// const getDepartment = () => {
//   get("/Department/departmentId-all").then(result => {
//     console.log(result)
//     department.value = result.data;
//   });
// }
// getDepartment();
</script>
<style scoped>

</style>